<template>
  <view class="weather-container">
    <view class="title">天气预报</view>

    <view v-if="loading">加载中...</view>

    <view v-if="error">{{ error }}</view>

    <view v-if="tomorrowWeather" class="weather-info">
      <view class="info-item">日期：{{ tomorrowWeather.date }}</view>
      <view class="info-item">星期：{{ tomorrowWeather.week }}</view>
	  <view class="info-item">天气：{{ tomorrowWeather.type }}</view>
      <view class="info-item">high：{{ tomorrowWeather.high }}</view>
      <view class="info-item">low：{{ tomorrowWeather.low }}</view>
	<view class="info-item">tip：{{ tomorrowWeather.notice }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      error: '',
      tomorrowWeather: null 
    }
  },
  onLoad() {

    this.getWeatherData()
  },
  methods: {
    getWeatherData() {
      this.loading = true
      this.error = ''
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        method: 'GET',
        success: (res) => {
		 console.log('天气数据：', res.data.data.forecast[1]);
          if (res.data && res.data.status === 200) {
            this.tomorrowWeather = res.data.data.forecast[1]
          } else {
            this.error = '获取天气数据失败'
          }
        },
        fail: (err) => {
          this.error = '网络请求失败，请稍后再试'
          console.error('请求失败：', err)
        },
        complete: () => {
          this.loading = false 
        }
      })
    }
  }
}
</script>

<style>
.weather-container {
  padding: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin: 30rpx 0;
  text-align: center;
  color: #333;
}

.weather-info {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
}

.info-item {
  font-size: 30rpx;
  color: #333;
}
</style>